<template>
  <div class="chart-content-wrapper">
    <top-filter :title="reportName">
      <double-check-filter @confirmDoubleSelect="planAreaSelect" defaultText="统筹区" :filter="filter" type="planArea"></double-check-filter>
      <single-list-filter-without-cb :defaultText="'医疗类别'" :filter="filter" :type="'insuredType'" @confirmSingleSelect="confirmSingleSelect"></single-list-filter-without-cb>
      <double-check-filter @confirmDoubleSelect="confirmDoubleSelect" defaultText="费用类型" :filter="filter" type="freeType"></double-check-filter>
    </top-filter>
     <div id="myChart1" class="chart-type1"  style="height:70%"></div>
    <Summarize :showSummarizeText="conclusion"></Summarize>
 </div>
</template>

<script>
  import {getChartItem1} from '../../../api/api'
  import SingleListFilter from '../../last/filter/single-list-filter.vue'
  import DoubleCheckFilter from '../../last/filter/double-check-filter.vue'
  import TopFilter from '../../last/filter/top-filter1.vue'
  import Summarize from '../../last/summarize/summarize.vue'
  import SingleListFilterWithoutCb from '../../last/filter/single-list-filter-without-checkbox'
export default {
  name: 'chart1',
  props: ['isChange'],
  components: {
    SingleListFilter,
    DoubleCheckFilter,
    TopFilter,
    Summarize,
    SingleListFilterWithoutCb
  },
  data () {
    return {
      filter: JSON.parse(JSON.stringify(require('../../cnst/allInputs.json').data)),
      conclusion:'',
      areaCode: null,
      costType: null,
      medicalCategory: null,
      reportName:'2013年-2018年区域医疗费用增长趋势分析',
      isTotal:true
    }
  },
  mounted(){
    this.myChart = this.$echarts.init(document.getElementById('myChart1') ,null, {renderer: 'canvas'})
    //给echart 加loading效果
    this.myChart.showLoading()
    //首次渲染
    this.getData();
    let that = this;
    this.myChart.on('click', function (params) {
      if(params.componentSubType==='bar'){
        that.$router.push({path:`/report/chartDetail1/${params.name}/${that.areaCode}/${that.costType}/${that.medicalCategory}`})
      }
    });
  },
  watch:{
    isChange(){
      setTimeout(()=>{
        this.myChart.resize();
      },101)
    }
  },
  methods:{
    getData(){
      getChartItem1('report/medExpGrowthTrendAnalysis',this.areaCode, this.costType,  this.medicalCategory).then(response=>{
        let json = response.data;
        if(response.code===0){
          this.myChart.hideLoading();
          this.reportName = json.reportName;
          this.drawLine(json)
        }
      })
    },
    confirmSingleSelect(filter) {
      //医疗类别选择
      this.medicalCategory = filter;
      this.getData();
    },
    confirmDoubleSelect(filter){
      //费用类型选择
      this.costType = filter.join(',');
      this.getData();
    },
    planAreaSelect(filter){
      //统筹区选择
      this.areaCode = filter.join(',')
      this.getData();
    },
    drawLine(json){
      this.conclusion = json.reportConclusion;
      // 格式化负增长数据，为0时设为空
      json.negativeIncreaseQuotaList.map((item,index)=>{
        if(item==0){
          json.negativeIncreaseQuotaList[index]=''
        }
      })
      // 基于准备好的dom，初始化echarts实例
      // 绘制图表

      this.myChart.setOption({
        title:{
          subtext: '单位 : 万元',
          left:'2%',
          top:'20%',
          x:'left',
          subtextStyle:{
            color:'#fff'
          }
        },
        // Make gradient line here
        grid:[//此参数可在一个dom中划分多个图表 可设置不同图表的位置
          {
            height: '20%',
            top:'6%',
            tooltip: {
              formatter: "{b}</br>{c}%" //给当前坐标系添加弹窗
            }
          },
          {
            height: '55%',
            top:'32%',
            tooltip: {
              show:false,

            }
          }
        ],
        legend: {
          top: '94%',
          left:'6%',
          icon:'rect',
          itemWidth: 30,
          itemHeight: 10,
          itemGap: 10,
          selectedMode: false,
          data:['医疗总费用','增长额(正)',{
            name:'增长额(负)',
          }],
          textStyle:{
            color:'#fff'
          }
        },
        tooltip: {
          /*trigger: 'axis',*/
        },
        xAxis: [{
          data: json.yearList,
          show:true,
          axisLine:{
            show:true,//显示x轴坐标线并设置为虚线
            lineStyle:{
              color:'#294363'
            }
          },
          axisTick:{
            show:false //不显示x轴坐标的刻度
          },
          axisLabel:{
            show:false //不显示x轴坐标数值
          }
        }, {
          data: json.yearList,
          gridIndex: 1,
          axisLine:{ //x轴的横线是否显示
            show:true,
            lineStyle:{
              color:'#2a4565'
            }
          },
          axisTick:{ //x轴的刻度短竖线是否显示
            show:false
          },
          axisLabel : {
            formatter: '{value}',
            textStyle: {
              color: '#fff'
            }
          },
        }],
        yAxis: [{
          splitLine: {
            show: false
          },
          position:'right',
          /*minInterval:40,*/
          /*max:'dataMax',*/
         /* min:'dataMin',*/
          splitNumber:2,
          axisLine:{
            show:false,
          },
          axisTick:{
            show:false
          },
          axisLabel : {
            formatter: '{value}',
            textStyle: {
              color: '#fff'
            }
          },
        }, {
          splitLine: {
            show: true,
            lineStyle:{
              color:'#2a4565',
              type:'dashed'
            }
          },
          gridIndex: 1,
          axisLine:{
            show:true,
            lineStyle:{
              color:'#2a4565'
            }
          },
          axisTick:{
            show:false
          },
          axisLabel : {
            formatter: '{value}',
            textStyle: {
              color: '#fff'
            }
          },
        }],
        visualMap: [{
          show: true,
          dimension: 0,
          seriesIndex: 0,
          left: '60%',
          top: '94%',
          itemWidth:10,
          itemHeight:10,
          orient:"horizontal",
          textStyle:{
            color:'#fff'
          },
          pieces:[
            {
              lte: 4,
              color: '#129cff',
              symbol:'circle',
              label: '增长率（环比）',
            }, {
              gt: 4,
              lte: 5,
              symbol:'circle',
              color: '#67ffdb',
              label: '增长率（同比）'
            }
          ],
        }],
        series: [{
          type: 'line',
          showSymbol: true,
          data: json.yearlyGrowthRateList,
          symbolSize: 10,
          label:{
            show:true,
            position:'top',
            formatter:'{c}%',
            color:'#fff'
          },
            markLine:{
            label:{
              position: 'start',
              formatter: '平均增长\n率{c}%',
            },
              symbol: 'none',//设置平均线的没样式
            data : [
              {
                type : 'average',
                name: '平均增长率',
              }
            ],
            lineStyle: {
              color:'#ff6a93'
            }
          }
        }, {
          type: 'bar',
          showSymbol: false,
          name: '医疗总费用',
          stack:'总额',
          data: json.yearlyTotalCostList,
          color:'#ff6a93',
          barWidth: '40%',
          xAxisIndex: 1,
          yAxisIndex: 1
        },{
          type: 'bar',
          name:'增长额(正)',//此值与legend图例对应
          showSymbol: false,
          stack:'总额',
          color:'#ffd66a',
          data: json.positiveIncreaseQuotaList,
          label:{
            show:true,
            color:'#fff',
            position:'top',
            formatter:function(params){
              let val = ''
              let arr = json.yearlyTotalCostList;
              arr.map((item,index)=>{
                if(params.dataIndex==index){
                  val = parseInt((arr[index]+params.value)*100)/100+'万元'
                }
              })
              return val;
            }
          },
          barWidth: '40%',
          xAxisIndex: 1,
          yAxisIndex: 1
        },{
          type: 'bar',
          name:'增长额(负)',
          showSymbol: false,
          stack:'总额',
          itemStyle:{
            borderType:'dashed',
            borderColor:'#67ffdb',
            color:'rgba(255,255,255,0.1)',
          },
          data: json.negativeIncreaseQuotaList,
          barWidth: '40%',
          xAxisIndex: 1,
          yAxisIndex: 1
        }]
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
